<%@include file="_header.jsp"%>

        <title>${inhoud.attendDigitalClassTitle}</title>
        <script type="text/javascript" src="js/jquery.toggle.buttons.js?version=<%= (int) (Math.random() * 100000000)%>"></script>
        <link href="css/bootstrap_toggle.css?version=<%= (int) (Math.random() * 100000000)%>" rel="stylesheet">

        <!-- File tree and JSP controller -->
        <link href="js/jqueryFileTree/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="js/jqueryFileTree/jqueryFileTree.js" type="text/javascript"></script>        

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        
        <c:choose>
            <c:when test="${userLevel != 2 && userLevel != 3}">
                <%@include file="errorPage.jsp"%>
            </c:when><c:otherwise>
    <%@include file="_menu.jsp"%>

    <div class="sidebar">

            <div class="redbar"><a href="#"><div id="bar-textcontent">${inhoud.attendDigitalClassTitle}</div></a>
            </div>
<div id="sidescreen">

    <ul class="thumbnails">
    <li class="span4">
    <div class="thumbnail">
     <h3>${inhoud.attendDigitalClassTitle}</h3>
    <img src="icons/blackboard.png" alt="">

    <p>${inhoud.attendDigitalClassT4}</p>
    </div>
    </li>
    <div class="insertext-thumbnail">
    ${inhoud.attendDigitalClassT5}
    </div>
    </ul>

 
</div>



        </div>

<div class="wrappermain">


<div class="digitalclass">
    <div id="subheader"> <div id="bar-textcontent">${inhoud.attendDigitalClassTitle}</div> </div>




      <div class="main-digital">        
        <div class="digital_class">
            
            ${test} ${test2}
<c:choose>
    <c:when test="${giveDigitalClass.digitalClassId == null}">
        ${inhoud.giveClassT8}:
        <table class="table" >
            <td>${inhoud.changeCourseT}</td>
            <td>Module</td>
            <td>${inhoud.description}</td>
            <td>${inhoud.planClassT}</td>
            <td>${inhoud.planClassT2}</td>
            <td>${inhoud.planClassT3}</td>
            <td>Max<br>students</td>
            <td>&nbsp;</td>
        <c:forEach var="curClass" items="${digitalClasses}">
    <tr>
        <td>
            ${curClass.course.courseName}
        </td>
        <td>
            ${curClass.module.moduleName}   
        </td>
        <td>
            ${curClass.description}
        </td>      
        <td>
            ${curClass.date}
        </td>          
        <td>
            ${curClass.startTime}
        </td>      
        <td>
            ${curClass.endTime}
        </td>      
        <td>
            ${curClass.maxStudents}
        </td>         
        <td>
            <a href="give_digital_class?ID=${curClass.digitalClassID}"><img src="icons/next_button.png"></a>
        </td>
    </tr>
${digitalClass.maxStudents}
        </c:forEach>
        </table>
    </c:when><c:otherwise>            
            
            
            <form action="give_digital_class" method="POST" id="digitalClassForm">
            <input type="hidden" name="digitalClassId" value="${giveDigitalClass.digitalClassId}">
            <table>
                <tr>
                    <td>${inhoud.giveClassT}:</td>
                    <td><tog><input class="classInput" name="classActive" type="checkbox"<c:if test="${giveDigitalClass.classActive == true}"> checked="checked"</c:if>></tog></td>
            
                    <td>${inhoud.giveClassT5}:</td>
                    <td><tog><input class="classInput" name="mediaActive" type="checkbox"<c:if test="${giveDigitalClass.mediaActive == true}"> checked="checked"</c:if>></tog></td>                          

                </tr>
                <tr>
                    <td>${inhoud.giveClassT2}:</td>
                    <td><tog><input class="classInput" name="videoActive" type="checkbox"<c:if test="${giveDigitalClass.videoActive == true}"> checked="checked"</c:if>></tog></td>
        
                    <td>Current Media</td>
                    <td><select class="classInput" name="mediaActiveType">
                            <option value="1" selected>Whiteboard</option>
                            <option value="2">Powerpoint</option>
                            <option value="3">Media</option>
                        </select></td>
                </tr>
                <tr>
                    <td>${inhoud.giveClassT4}:</td>
                    <td><tog><input class="classInput" name="videoPlaying" type="checkbox"<c:if test="${giveDigitalClass.videoPlaying == true}"> checked="checked"</c:if>></tog></td>            
                </tr>
                <tr>
                    <td colspan="2">${inhoud.giveClassT3}:</td>
                    <td colspan="2">${inhoud.giveClassT6}:</td>
                </tr>
                <tr>
                    <td colspan="2"><input class="classInput" name="videoSource" type="text" value="${giveDigitalClass.videoSource}" style="width:330px;"><br>
                    <div style="width:330px; height: 150px; overflow-y: auto; overflow-x: hidden;"><div id="fileTreeMovie"></div></div></td>
                    
                    <td colspan="2"><input class="classInput" name="mediaSource" type="text" value="${giveDigitalClass.mediaSource}" style="width:350px;"><br>
                    <div style="width:350px; height: 150px; overflow-y: auto; overflow-x: hidden;"><div id="fileTreeMedia"></div></div></td> 
                </tr>             
                <tr>

                </tr>
                <tr>
                    <td>Whiteboard</td>
                    <td><input class="classInput" name="blackBoardText" type="text" value="${giveDigitalClass.blackBoardText}"><br>
                </tr>
                <tr>
                    <td>${inhoud.giveClassT7}:</td>
                    <td><input class="classInput" name="powerPointSlide" type="text" value="${giveDigitalClass.powerPointSlide}"></td>
                </tr>                
            </table>
            </form>
                
            <iframe style="width:95%; height:600px;" src="attend_digital_class?ID=${giveDigitalClass.digitalClassId}&embedded=true" id="digitalClass"></iframe>
        </div> 
    <script language="javascript">
$(document).ready( function() {   
        createFileTree('fileTreeMovie','videoSource', 'flv|mp4|3g2|3gp|aac|f4b|f4p|f4v|m4a|m4v|mov|sdp|vp6');
        createFileTree('fileTreeMedia','mediaSource', 'jpg|jpeg|bmp|gif|png|ppt|pptx|ppm');
        
                        $('tog').toggleButtons({
                            style: {
                                enabled: "success",
                                disabled: "danger"
                            }
                        });  
                        
                        
                        
                        $('.classInput').change(function() {
                            submitForm();
                        });
                    });
                    
                    function submitForm(){
                        var form = $('#digitalClassForm');
                        $.ajax( {
                            type: "POST",
                            dataType: "html",
                            url: form.attr( 'action' ),
                            data: form.serialize(),
                            error: function(data){
                                alert('ERROR: '+data);
                            }
                        } );   
                    }

                    function createFileTree(ID, target, filterExtensions){
                        $('#'+ID).fileTree({
                            root: ${giveDigitalClass.digitalClassId},
                            script: 'jqueryFileTree.jsp',
                            expandSpeed: 300,
                            collapseSpeed: 300,
                            multiFolder: false,
                            checkBoxes: false,
                            filterExtensions: filterExtensions
                        }, function(file) {
                            $('input[name="'+target+'"]').attr('value', "/32LNew/documents/"+file);
                            setTimeout(function(){ submitForm(); }, 500 ); 
                        }); 
                    }
                </script>
            </c:otherwise></c:choose>
                
</c:otherwise></c:choose>                
      </div>
    </body>
</html>
